import {
  Row,
  Col,
  Flex,
  Typography,
  Button,
  Form,
  Input,
  Divider,
  Radio,
  Select,
  Modal,
  TreeSelect,
  Transfer,
  Table,
  Cascader,
  Tree
} from 'antd'
import React, { useEffect, useState } from 'react'
import { regionData } from '../utils/region'
import { useParams } from 'react-router-dom'
import { adminActivatyInfo } from '../service/activaty'
import { shopList } from '../service/shop'
import MyDatePicker from '../components/MyDatePicker'
import { DeleteOutlined, PlusSquareOutlined } from '@ant-design/icons'

export default function TagAdd() {
  const { id } = useParams() // 获取路由参数中的id
  const isEditing = id !== undefined // 根据id是否存在判断是编辑还是添加
  const [form] = Form.useForm()

  // 保存选择的日期
  const [selectedDateString, setSelectedDateString] = useState(null)
  // 穿梭机数据
  const [mockData, setMockData] = useState([
    {
      key: '1',
      title: '中关村1店',
      chosen: false
    },
    {
      key: '2',
      title: '中关村2店',
      chosen: true
    },
    {
      key: '3',
      title: '中关村3店',
      chosen: false
    }
  ])

  const treeData2 = [
    {
      title: '内容标签',
      value: '0-0',
      disabled: true,
      children: [
        {
          title: '美食',
          value: '0-0-1'
        },
        {
          title: '旅游',
          value: '0-0-2'
        },
        {
          title: '娱乐',
          value: '0-0-3'
        },
        {
          title: '文化',
          value: '0-0-4'
        },
        {
          title: '音乐',
          value: '0-0-5'
        }
      ]
    },
    {
      title: '用户标签',
      value: '0-1',
      disabled: true, // 禁用一级菜单项Node2的选择
      children: [
        {
          title: '富二代',
          value: '0-1-1'
        },
        {
          title: '羊毛党',
          value: '0-1-2'
        },
        {
          title: '铁公鸡',
          value: '0-1-3'
        },
        {
          title: '购物狂',
          value: '0-1-4'
        }
      ]
    }
  ]

  // 树形数据
  const treeData = [
    {
      title: (
        <Select options={[{ value: '且', label: '且' }]} defaultValue="且" />
      ),
      key: '0-0',
      children: [
        {
          title: (
            <Select
              options={[{ value: '或', label: '或' }]}
              defaultValue="或"
            />
          ),
          key: '0-0-0',
          isLeaf: true,
          children: [
            {
              title: (
                <>
                  <Select
                    options={[{ value: '0', label: '行为' }]}
                    defaultValue="0"
                    style={{ width: 70, marginRight: 10 }}
                  />
                  <Select
                    options={[{ value: '0', label: '对象' }]}
                    defaultValue="0"
                    style={{ width: 70, marginRight: 10 }}
                  />
                  <Select
                    options={[{ value: '0', label: '数值' }]}
                    defaultValue="0"
                    style={{ width: 70, marginRight: 10 }}
                  />
                  <Select
                    options={[{ value: '0', label: '等于' }]}
                    defaultValue="0"
                    style={{ width: 70, marginRight: 10 }}
                  />
                  <Input type="number" style={{ width: 70 }} value={1} />
                </>
              ),
              key: '0-0-0-0'
            },
            {
              title: (
                <>
                  <Select
                    options={[{ value: '0', label: '行为' }]}
                    defaultValue="0"
                    style={{ width: 70, marginRight: 10 }}
                  />
                  <Select
                    options={[{ value: '0', label: '对象' }]}
                    defaultValue="0"
                    style={{ width: 70, marginRight: 10 }}
                  />
                  <Select
                    options={[{ value: '0', label: '数值' }]}
                    defaultValue="0"
                    style={{ width: 70, marginRight: 10 }}
                  />
                  <Select
                    options={[{ value: '0', label: '等于' }]}
                    defaultValue="0"
                    style={{ width: 70, marginRight: 10 }}
                  />
                  <Input
                    type="number"
                    style={{ width: 70, marginRight: 10 }}
                    value={1}
                  />
                  <DeleteOutlined style={{ marginRight: 10, color: '#999' }} />
                  <PlusSquareOutlined
                    style={{ marginRight: 10, color: '#999' }}
                  />
                </>
              ),
              key: '0-0-0-1'
            }
          ]
        },
        {
          title: (
            <>
              <Select
                options={[{ value: '0', label: '行为' }]}
                defaultValue="0"
                style={{ width: 70, marginRight: 10 }}
              />
              <Select
                options={[{ value: '0', label: '对象' }]}
                defaultValue="0"
                style={{ width: 70, marginRight: 10 }}
              />
              <Select
                options={[{ value: '0', label: '数值' }]}
                defaultValue="0"
                style={{ width: 70, marginRight: 10 }}
              />
              <Select
                options={[{ value: '0', label: '等于' }]}
                defaultValue="0"
                style={{ width: 70, marginRight: 10 }}
              />
              <Input
                type="number"
                style={{ width: 70, marginRight: 10 }}
                value={1}
              />
              <DeleteOutlined style={{ marginRight: 10, color: '#999' }} />
              <PlusSquareOutlined style={{ marginRight: 10, color: '#999' }} />
            </>
          ),
          key: '0-0-1',
          isLeaf: true
        },
        {
          title: (
            <>
              <Select
                options={[{ value: '0', label: '行为' }]}
                defaultValue="0"
                style={{ width: 70, marginRight: 10 }}
              />
              <Select
                options={[{ value: '0', label: '对象' }]}
                defaultValue="0"
                style={{ width: 70, marginRight: 10 }}
              />
              <Select
                options={[{ value: '0', label: '数值' }]}
                defaultValue="0"
                style={{ width: 70, marginRight: 10 }}
              />
              <Select
                options={[{ value: '0', label: '等于' }]}
                defaultValue="0"
                style={{ width: 70, marginRight: 10 }}
              />
              <Input
                type="number"
                style={{ width: 70, marginRight: 10 }}
                value={1}
              />
              <DeleteOutlined style={{ marginRight: 10, color: '#999' }} />
              <PlusSquareOutlined style={{ marginRight: 10, color: '#999' }} />
            </>
          ),
          key: '0-0-2',
          isLeaf: true
        },
        {
          title: (
            <PlusSquareOutlined style={{ marginRight: 10, color: '#999' }} />
          ),
          key: '0-0-3',
          isLeaf: true
        }
      ]
    }
  ]
  useEffect(() => {
    // 获取所有店铺
    ;(async () => {
      const res = await shopList({
        pageNo: 1,
        pageSize: 1000
      })
      console.log(res)
      const arr = res.data.objects.map((item) => {
        return {
          key: item.id,
          title: item.storeName,
          chosen: false
        }
      })
      setMockData(arr)
    })()
    if (isEditing) {
      ;(async () => {
        const res = await adminActivatyInfo(id)
        console.log(res)
        // 给表单赋值
        form.setFieldsValue(res.data)
      })()
    } else {
    }
  }, [])
  return (
    <>
      <Row className="info">
        <Col span={24}>
          <Flex justify={'space-between'}>
            <Typography.Title level={3}>新建用户标签</Typography.Title>
          </Flex>
        </Col>
      </Row>
      <Form
        labelCol={{
          span: 2
        }}
        wrapperCol={{
          span: 12
        }}
        style={{ width: '100%', marginTop: 30 }}
        form={form}
      >
        <Row className="container" style={{ marginBottom: 0, marginTop: 0 }}>
          <Col span={24}>
            <Typography.Title level={4}>基本信息</Typography.Title>
          </Col>
          <Col span={24}>
            <Form.Item label="标签分组">
              <TreeSelect
                style={{
                  width: 300
                }}
                dropdownStyle={{
                  maxHeight: 400,
                  overflow: 'auto'
                }}
                treeData={treeData2}
                placeholder="请选择分组"
                treeDefaultExpandAll
              />
            </Form.Item>
            <Form.Item label="标签名称">
              <Input placeholder="请输入标签名称" style={{ width: 300 }} />
            </Form.Item>
            <Form.Item label="标签管理名称">
              <Input
                placeholder="支持字母，数字，下划线"
                style={{ width: 300 }}
              />
            </Form.Item>
            <Form.Item label="描述" name="describes">
              <Input.TextArea
                style={{ height: 120, width: 400, resize: 'none' }}
              />
            </Form.Item>
            <Form.Item label="门店状态" initialValue={1}>
              <Radio.Group>
                <Radio value={1}>开启</Radio>
                <Radio value={2}>关闭</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col>
            <Divider style={{ margin: 0 }} />
          </Col>
        </Row>
        <Row className="container" style={{ marginTop: 0, marginBottom: 0 }}>
          <Col span={24}>
            <Typography.Title level={4}>基础属性</Typography.Title>
          </Col>
          <Col span={24}>
            <Form.Item label="性别">
              <Select
                placeholder="请选择"
                style={{ width: 300 }}
                options={[
                  {
                    label: '男',
                    value: '男'
                  },
                  {
                    label: '女',
                    value: '女'
                  }
                ]}
              />
            </Form.Item>
            <Form.Item label="年龄">
              <Input
                type="number"
                style={{ width: 100 }}
                placeholder="请输入"
              />
              <span style={{ margin: '0 10px' }}>-</span>
              <Input
                type="number"
                style={{ width: 100 }}
                placeholder="请输入"
              />
            </Form.Item>
            <Form.Item label="常驻地区">
              <Cascader
                options={regionData}
                onChange={(value) => {}}
                placeholder="请选择查询的省/市/区县"
                style={{ width: 280 }}
              />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col>
            <Divider style={{ margin: 0 }} />
          </Col>
        </Row>
        <Row className="container" style={{ marginTop: 0, marginBottom: 0 }}>
          <Col span={24}>
            <Typography.Title level={4}>特征规则</Typography.Title>
          </Col>
          <Col span={24} style={{ marginTop: 20 }}>
            <Form.Item initialValue={'0'} label="时间段">
              <Radio.Group buttonStyle="solid" style={{ marginRight: 20 }}>
                <Radio.Button value="0">相同时间段</Radio.Button>
                <Radio.Button value="1">不同时间段</Radio.Button>
              </Radio.Group>
              <MyDatePicker
                selectedDateString={selectedDateString}
                setSelectedDateString={setSelectedDateString}
              />
            </Form.Item>
            <Form.Item label="标签规则">
              <Tree
                // checkable
                defaultExpandAll
                onCheck={(checkedKeys) => {
                  console.log('onCheck', checkedKeys)
                }}
                onSelect={(selectedKeys, info) => {
                  console.log('selected', selectedKeys, info)
                }}
                treeData={treeData}
              />
            </Form.Item>
            <Form.Item label=" " colon={false} name="beizhu">
              <Button type="primary" htmlType="submit">
                发布
              </Button>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </>
  )
}
